<template>
  <div class="container">
    <div class="white-nav">
      <div class="wrap">
        <div class="logo">
          <img src="../assets/img/mi-home.png" alt="" class="mi-home" />
          <img src="../assets/img/mi-logo.png" alt="" class="mi-logo" />
        </div>
        <div class="nav-bar">
          <ul>
            <li>
              <a href="#"><img src="../assets/img/zzxsh.gif" alt="" /></a>
            </li>
            <li>
              <a href="#">小米手机</a>
              <div class="nav-bar-list">
                <div class="wrap">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="img-box">
                          <img src="../assets/img/phone.png" alt="" />
                        </div>
                        <p class="name">小米10至尊纪念版</p>
                        <p class="price">5200元</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="img-box">
                          <img src="../assets/img/phone.png" alt="" />
                        </div>
                        <p class="name">小米10至尊纪念版</p>
                        <p class="price">5200元</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="img-box">
                          <img src="../assets/img/phone.png" alt="" />
                        </div>
                        <p class="name">小米10至尊纪念版</p>
                        <p class="price">5200元</p>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="img-box">
                          <img src="../assets/img/phone.png" alt="" />
                        </div>
                        <p class="name">小米10至尊纪念版</p>
                        <p class="price">5200元</p>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
          </ul>
        </div>
        <div class="search">
          <input type="text" placeholder="元宇宙" />
          <button class="iconfont">&#xe63d;</button>
        </div>
      </div>
    </div>
    <!-- 白色导航结束 -->
    <!-- banner部分开始 -->
    <div class="banner">
      <div class="wrap">
        <img class="banner-img" src="../assets/img/banner.jpg" alt="" />
        <div class="slide">
          <ul>
            <li>
              <a href="#">手机 <i class="iconfont">&#xe621;</i></a>
              <div class="slide-list">
                <ul>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="../assets/img/phone.png" alt="" />
                      <span>小米手机至尊版</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#">电视 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电脑 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">笔记本 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">台式机 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电话卡 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电话卡 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电话卡 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电话卡 <i class="iconfont">&#xe621;</i></a>
            </li>
            <li>
              <a href="#">电话卡 <i class="iconfont">&#xe621;</i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- banner部分结束 -->
  </div>
</template>

<script>
export default {};
</script>

<style scoped>

.container{
    width:1226px;
    margin: 0 auto;
}
/* 白色导航样式开始 */
.white-nav {
  width: 100%;
  height: 100px;
  background: #fff;
  position: relative;
}
.logo {
  width: 55px;
  height: 55px;
  background: #ff6700;
  float: left;
  margin-top: 22.5px;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}
.logo > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.2s;
}
.mi-home {
  left: -55px;
}
.mi-logo {
  left: 0;
}
.logo:hover > .mi-home {
  left: 0;
}
.logo:hover > .mi-logo {
  left: 55px;
}
.nav-bar {
  width: 875px;
  height: 100px;
  line-height: 100px;
  float: left;
}
.search {
  width: 296px;
  height: 100px;
  float: right;
}
.nav-bar li {
  float: left;
}
.nav-bar > ul > li > a {
  color: #333;
  padding: 0 10px;
}

.nav-bar > ul > li > a:hover {
  color: #ff6700;
}

.nav-bar > ul > li:first-child img {
  margin-top: 22.5px;
}

.search input {
  width: 244px;
  height: 50px;
  border: 1px solid #e0e0e0;
  margin-top: 25px;
  /* 去掉选中的边框 */
  outline: none;
  padding: 0 10px;
  box-sizing: border-box;
  border-right: 0;
}

.search button {
  width: 52px;
  height: 50px;
  background: #fff;
  border: 1px solid #e0e0e0;
  float: right;
  margin-top: 25px;
}
.search button:hover {
  background: #ff6700;
  color: #fff;
}

.nav-bar-list {
  width: 100%;
  height: 229px;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 100px;
  display: none;
  z-index: 10;
}

.nav-bar li:hover .nav-bar-list {
  display: block;
}

.img-box {
  width: 100%;
  height: 110px;
  margin-top: 35px;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.nav-bar-list li:last-child .img-box {
  border-right: 0;
}

.nav-bar-list p {
  font-size: 12px;
  line-height: 20px;
}

.name {
  color: #333;
}

.price {
  color: #ff6700;
}
/* 白色导航样式结束 */
/* banner样式开始 */
.banner {
  width: 100%;
  height: 460px;
}
.banner-img {
  width: 100%;
}
.banner > .wrap {
  position: relative;
}
.slide {
  width: 234px;
  height: 420px;
  padding: 20px 0;
  background: rgba(105, 101, 101, 0.6);
  position: absolute;
  left: 0;
  top: 0;
}

.slide > ul > li {
  height: 42px;
  line-height: 42px;
  text-align: left;
  padding-left: 30px;
  font-size: 14px;
}
.slide > ul > li:hover {
  background: #ff6700;
}
.slide > ul > li > a {
  color: #fff;
}
.slide i {
  float: right;
  padding-right: 20px;
}

.slide-list {
  width: 992px;
  height: 460px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: none;
  box-sizing: border-box;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  padding-top: 2px;
  position: absolute;
  top: 0;
  left: 234px;
  display: none;
}
.slide-list ul {
  width: 100%;
}

.slide-list ul li {
  width: 247.75px;
  float: left;
  height: 76px;
  padding: 18px 0 18px 20px;
  box-sizing: border-box;
  line-height: 40px;
}
.slide-list img {
  width: 40px;
  margin-right: 14px;
}
.slide-list span {
  color: #333;
  font-size: 14px;
  /* 一行宽度不够的时候，用...代替 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: -14px;
}
.slide li:hover .slide-list {
  display: block;
}

.slide-list li:hover span {
  color: #ff6700;
}
/* banner样式结束 */
</style>